<template>
  <div class="k-duty-box">
    <div class="k-title">
      <img class="k-title-bg" :src="tbg" alt="" srcset="" />
      <div class="k-title-text">基础建设</div>
    </div>
    <div class="k-resp-zone">
      <div class="basic-map-box">
        <div id="basic-map"></div>
      </div>
      <div class="k-duty-add">
        <div class="k-add-box">
          <img class="k-item-bg" :src="bg02" alt="" srcset="" />
          <div class="k-item-box">
            <div class="k-item-text">
              {{ PageData.leaderNum }}
            </div>
            <div>林长数量</div>
          </div>
        </div>
        <div class="k-add-box">
          <img class="k-item-bg" :src="bg03" alt="" srcset="" />
          <div class="k-item-box">
            <div class="k-item-text">
              {{ PageData.rangerNum }}
            </div>
            <div style="font-size: 14px">护林员数量</div>
          </div>
        </div>
        <div class="k-add-box">
          <img class="k-item-bg" :src="bg02" alt="" srcset="" />
          <div class="k-item-box">
            <div class="k-item-text">
              {{ PageData.onlineLeaderNum }}
            </div>
            <div>上线林长人数</div>
          </div>
        </div>
        <div class="k-add-box">
          <img class="k-item-bg" :src="bg03" alt="" srcset="" />
          <div class="k-item-box">
            <div class="k-item-text">
              {{ PageData.onlinePatrolNum }}
            </div>
            <div>上线护林员人数</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script lang="ts" setup>
import { onMounted, watch } from "vue";
import { CaretBackOutline, CaretForward } from "@vicons/ionicons5";
import tbg from "../../assets/images/tbg.svg";
import bg02 from "../../assets/images/ren1.svg";
import bg03 from "../../assets/images/ren2.svg";
import { NCarousel, NEllipsis, NIcon, NGrid, NGi } from "naive-ui";
import * as echarts from "echarts";
import { PageData } from "../../composables/useMapView";
let option;
const itemStyle = {
  borderRadius: [10, 10, 0, 0],
};
option = {
  color: ["#f7861d", "#2ddfa4"],
  legend: {
    data: ["护林员上线人数", "林长上线人数"],
    left: "center",
    top: 210,
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    type: "category",
    data: ["07.20", "07.21", "07.22", "07.23", "07.24", "07.25", "07.26"],
    axisLabel: {
      color: "#fff",
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      // formatter: "{value} %",
      formatter: "{value} ",
      color: "#fff",
    },
  },
  grid: [{ show: false, z: 0, left: "15%", top: 10, right: "10%", bottom: 50 }],
  series: [
    {
      name: "护林员上线人数",
      type: "bar",
      data: [
        {
          value: 34,
          itemStyle,
        },
        {
          value: 94,
          itemStyle,
        },
        {
          value: 94,
          itemStyle,
        },
        {
          value: 94,
          itemStyle,
        },
        {
          value: 94,
          itemStyle,
        },
      ],
    },
    {
      name: "林长上线人数",
      type: "bar",
      data: [
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
        {
          value: 34,
          itemStyle,
        },
      ],
    },
  ],
};
let myChart: any;
onMounted(() => {
  var chartDom = document.getElementById("basic-map");
  myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
watch(PageData, (nv) => {
  const data: any = [
    { name: "护林员上线人数", type: "bar", data: [] },
    { name: "林长上线人数", type: "bar", data: [] },
  ];
  option.xAxis.data = [];
  PageData.value.onlineRate.forEach((item) => {
    data[0].data.push({
      value: item.rangerOnlineRate,
      itemStyle,
    });
    data[1].data.push({
      value: item.leaderOnlineRate,
      itemStyle,
    });
    option.xAxis.data.push(item.date);
  });
  option.series = data;
  option && myChart.setOption(option);
});
const workData = {};
</script>
    
<style scoped lang="scss">
.k-duty-box {
  position: relative;
  width: 380px;
  height: 394px;
  top: 30px;
  .k-title {
    position: relative;
    top: 10px;
    left: 10px;
    width: 378px;
    height: 36px;
    margin-bottom: 10px;

    .k-title-text {
      position: absolute;
      top: 6px;
      left: 11px;
      font-size: 16px;
      color: #fff;
      font-family: "HYk2gj";
      font-weight: bold;
    }
  }

  .k-resp-zone {
    position: relative;
    top: 40px;
    left: 12px;
    width: 380px;
    height: 178px;
    .basic-map-box {
      position: relative;
      width: 100%;
      height: 228px;
      #basic-map {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }

    .k-duty-add {
      position: relative;
      width: 100%;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      top: 50px;

      .k-add-box {
        position: relative;
        height: 64px;
        width: 180px;
        display: flex;
        align-items: center;
        flex-direction: row;
        .k-item-bg {
          top: 0;
          left: 0;
          width: 60px;
          height: 60px;
        }
        .k-item-box {
          display: flex;
          flex-direction: column;
          text-align: left;
          align-items: flex-start;
          margin-left: 5px;
          .k-item-text {
            position: relative;
            text-align: center;
            font-size: 20px;
            font-weight: 800;
          }
        }
      }
    }
  }
}
</style>
    